<template>
  <div class="goods">
    <el-card>
      <!-- 1. 搜索区域 -->
      <div class="header">
        <el-input @change="searchInp" v-model="input" placeholder="请输入内容" icon="el-icon-search"><el-button slot="append" icon="el-icon-search"></el-button></el-input>
        <el-button type="primary" @click="addGoods">添加</el-button>
      </div>
      <!-- 2. 表格区域展示视图数据 -->
      <div class="wrapper">
        <el-table :data="tableData" border stripe highlight-current-row>
          <el-table-column prop="id" label="商品ID" width="100"> </el-table-column>
          <el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="price" label="商品价格" width="100"> </el-table-column>
          <el-table-column prop="num" label="商品数目" width="100"> </el-table-column>
          <el-table-column prop="date" label="日期" width="110">
            <template slot-scope="scope">
              {{ scope.row.date | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="image" label="商品图片" width="120">
            <template slot-scope="scope">
              <!-- <img :src="scope.row.image" alt="" /> -->
              <el-image style="width: 100px; height: 100px" :src="scope.row.image" fit="fill"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="sellPoint" label="商品卖点" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="descs" label="商品描述" show-overflow-tooltip> </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="info" size="mini" @click="handleFind(scope.$index, scope.row)" icon="el-icon-search"> 查看</el-button>
              <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit"> 编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="text-align: center; margin: 20px">
          <el-pagination @size-change="handleSizeChange" background layout="total, prev,sizes, pager, next, jumper" :current-page.sync="currentNo" :page-sizes="[4, 6, 10, 15]" @current-change="currentPage" :page-size="pageCount" :total="totalPage"> </el-pagination>
        </div>
      </div>
    </el-card>
    <add-goods ref="AddGoods"></add-goods>
    <edit-goods ref="EditGoods" :rowData="rowData"></edit-goods>
    <find-goods ref="FindGoods" :rowData="rowData"></find-goods>
  </div>
</template>

<script>
import AddGoods from './addGoods.vue'
import EditGoods from './editGoods.vue'
import FindGoods from './findGoods.vue'
export default {
  name: 'FirstProjectIndex',

  data() {
    return {
      input: '',
      tableData: [], //当前页码表格数据
      pageNo: 1, //表格页码
      pageCount: 4, //数据数
      currentNo: 1, //当前页码
      allData: [], //全部数据
      totalPage: 1,
      type: 1,
      list: [],
      rowData: {} //当前行的对象
    }
  },

  methods: {
    handleFind(index, row) {
      console.log(index, row)
      this.$refs.FindGoods.dialogVisible = true
      this.rowData = { ...row }
      this.$refs.FindGoods.goodsForm = row
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$refs.EditGoods.editDialogVisible = true
      this.rowData = { ...row }
      this.$refs.EditGoods.goodsForm = row
    },
    async handleDelete(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      const { data: res } = await this.$http.post('/goods/delete', { id })
      if (res.code != 0) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      this.getData()
      this.getPageTotal()
    },
    addGoods() {
      this.$refs.AddGoods.dialogVisible = true
    },
    // 每页条数
    handleSizeChange(val) {
      this.pageCount = val
      this.currentNo = 1
      this.getData()
      console.log(`每页 ${val} 条`)
    },
    //获取前4条数据
    getData(index) {
      this.pageNo = index || this.pageNo
      this.$http
        .post('/page', { page: this.pageNo, pageSize: this.pageCount })
        .then(res => {
          // console.log(res.data.data)
          this.tableData = res.data.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    //当前页数据
    currentPage(currentPage) {
      this.currentNo = currentPage
      console.log(this.currentNo)
      // this.getData(this.currentNo)
      if (this.type == 1) {
        this.getData(this.currentNo)
      } else {
        this.tableData = this.list.slice((this.currentN - 1) * 3, this.currentN * 3)
      }
    },
    //获取序号
    indexMethod(index) {
      return (this.currentNo - 1) * this.pageCount + index + 1
    },
    //获取总页数
    getPageTotal() {
      this.$http
        .get('/getProductData')
        .then(res => {
          // console.log(res.data)
          // this.allData = res.data.data
          // this.totalPage = Math.ceil(this.allData.length / this.pageCount) * 10
          this.totalPage = res.data.total
          // console.log(this.totalPage)
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 搜索
    async searchInp(val) {
      const { data: res } = await this.$http.get('/search', { params: { search: val } })
      console.log(res)
      this.currentNo = 1
      if (res.code === 0) {
        this.list = res.data
        this.tableData = []
        this.pageCount = 3
        this.tableData = res.data.slice(0, 3)
        this.totalPage = res.total
        this.type = 2
      } else {
        this.tableData = []
        this.totalPage = 1
        this.pageCount = 1
        this.type = 1
      }
    }
  },
  mounted() {
    this.getData()
    this.getPageTotal()
  },
  created() {
    // this.getGoodsList()
  },
  components: {
    AddGoods,
    EditGoods,
    FindGoods
  }
}
</script>

<style lang="scss" scoped>
.goods {
  .header {
    display: flex;
  }
  .wrapper {
    margin: 20px 0;
  }
  ::v-deep .el-image {
    width: 60px !important;
    height: 60px !important;
  }
  ::v-deep .cell {
    text-align: center;
  }
}
</style>
